<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue动画效果</title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		.aa{
			background-color: red;
			width: 300px;
			height: 300px;
		}
		.fade-enter-active,.fade-leave-active{
			transition: all 3s ease;
		}
		.fade-enter-active{
			opacity: 1;
			width: 300px;
			height: 300px;
		}
		.fade-leave-active{
			opcity: 0;
			width: 100px;
			height: 100px;
		}
		.fade-enter{
			opcity: 0;
			width: 0px;
			height: 0px;
		}
	</style>
</head>
<body>
	<div class="container">
		<button @click="flag=!flag">点我隐藏和显示</button>
		<transition name="fade">
			<div id="aa" class="aa" v-show="flag">
				我是div
			</div>
		</transition>

	</div>
	
	<script type="text/javascript">
		new Vue({
			el:'.container',
			data:{
				flag:false
			},
			methods:{
				
			}

		});
	</script>
</body>
</html>